<template>
  <div class="page-box-row-left flow-list">
    <FormBlock :title="$t('module.modelList.modelList')" 
    class="flow-classification"
    direction="column" style="width:'25%'; min-width: 250px;">
      <el-tree
        :default-expand-all="true"
        :data="modelList"
        :props="defaultProps"
        highlight-current
        :indent="10"
        :render-content="renderContent"
        node-key="id"
        ref="modelTypeListTree"
        icon-class="ivu-icon-ios-arrow-forward"
        @node-click="handleNodeClick"
        :expand-on-click-node="false"
      ></el-tree>
    </FormBlock>
    <FormBlock :title="$t('module.modelList.modelNodeManage')" direction="column">
      <ModelTable :procTypeInfo="selectedNode" />
    </FormBlock>
  </div>
</template>
<script>
import ModelTable from './modelTable.vue'
import ModelTypeEdit from './ModelTypeEdit.vue'
import { getModelTypeList, deleteModelType } from '@api/flowable/modelList.js'

function findChildren(pNode, nodeList) {
  let i = nodeList.length - 1,
    node,
    matched = true,
    children = (pNode.children = [])

  for (; i >= 0; ) {
    i = matched ? nodeList.length - 1 : --i
    node = nodeList[i]

    if (node && node.parentId === pNode.id) {
      matched = true
      nodeList.splice(i, 1)
      children.unshift(node)
      findChildren(node, nodeList)
    } else {
      matched = false
    }
  }
}

export default {
  name: 'menu-resource',
  data() {
    return {
      modelList: [],
      selectedNode: {},
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created: function() {
    // 查询产品
    this._getModelTypeList()
  },
  components: { ModelTable },
  methods: {
    _getModelTypeList() {
      this.modelList = []
      getModelTypeList().then(res => {
        const defaultRootNodeData = {
          id: '0',
          name: '所有数据',
          children: []
        }

        this.modelList.push(defaultRootNodeData)
        findChildren(defaultRootNodeData, res.data)
        this.$nextTick(() => {
          this.$refs.modelTypeListTree.setCurrentKey(defaultRootNodeData.id)
        })
      })
    },
    //添加删除小图标
    renderContent(h, { node, data, store }) {
      return (
        <span class="my-tree-item">
          <span class="item-title" title={data.name}>{data.name}</span>
          <span class="orgEditMenu" id={'MENU' + data.id}>
            <span
              class="orgEditSonMenu"
              on-click={event => this.commonEventProxy('addModelType', node, event)} //传入event解决火狐兼容性问题
            >
              <i class="ivu-icon ivu-icon-md-add" title={this.$t('module.modelList.create')}></i>
            </span>
            <span
              class="orgEditSonMenu"
              v-show={data.id !== '0'} //条件过滤显示
              on-click={event => this.commonEventProxy('editModelType', node, event)} //传入event解决火狐兼容性问题
            >
              <i class="ivu-icon ivu-icon-md-create" title={this.$t('module.modelList.edit')}></i>
            </span>
            <span
              v-show={data.id !== '0' && data.children.length === 0} //条件过滤显示
              class="orgEditSonMenu"
              on-click={event => this.commonEventProxy('_deleteModelType', data, event)}
            >
              <i class="ivu-icon ivu-icon-ios-trash" title={this.$t('module.modelList.delete')}></i>
            </span>
          </span>
        </span>
      )
    },
    handleNodeClick(data) {
      this.selectedNode = data
    },
    commonEventProxy(functionName, node, event) {
      event.stopPropagation()
      event.preventDefault()
      this[functionName](node)
    },
    addModelType(node) {
      let pNodeData = node.data
      const parentId = pNodeData.id
      new this.$pageModal(
        ModelTypeEdit,
        {
          props: {
            nodeData: { parentId }
          }
        },
        data => {
          if (data) {
            this._getModelTypeList()
          }
        }
      )
    },
    editModelType(node) {
      let nodeData = node.data
      new this.$pageModal(
        ModelTypeEdit,
        {
          props: {
            nodeData
          }
        },
        data => {
          if (data) {
            this._getModelTypeList()
          }
        }
      )
    },
    _deleteModelType(data) {
      new $confirm(this.$t('common.warning.confirmToDelete'), this).then(() => {
        deleteModelType(data.id).then(response => {
          this.$Message.success({
            content: this.$t('common.deleteSuccess'),
            duration: 3
          })
          // this.search()
          this.$refs.modelTypeListTree.remove(data)
        })
      })
    }
  }
}
</script>

<style lang="less">
.flow-list{
  .flow-classification{
    width: 25%;
  }
  .my-tree-item {
    display: flex;
    align-items: center;
    overflow: hidden;
    .item-title{
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .orgEditMenu{
      position: relative;
    }
  }
}

</style>